<div class="container">
  <!DOCTYPE html>
<html lang="zh-cn">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">




<title>Miles`s</title>

<link rel="stylesheet" href="https://mada.gitee.io/notes//css/styles.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" 
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/zenburn.min.css" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="https://mada.gitee.io/notes//js/highlight.js"></script>






  <div class="container">
    <nav class="navbar level">
      <div class="navbar-brand">
          <a class="nav-item" href="https://mada.gitee.io/notes/"><h1 class="title is-3">Miles`s</h1></a>
      </div>           
      <div class="navbar-menu has-text-centered is-active">
          <div class="navbar-end is-centered">
              
           </div>
      </div>
    </nav>
  </div>
  <main class="container">
      
      
      <h1 class="title is-3">2018</h1>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap;line-height:42px">11-27</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/%E7%BA%BF%E6%80%A7%E6%8E%92%E5%BA%8F/">线性排序</a></h1>
          <div class="content is-hidden-mobile">
            这类排序算法的时间复杂度是线性的，统称 线性排序。
之所以能够做到线性复杂度，原因就是：这些算法是非基于比较的排序算法，都不涉及元素之间的比较操作。
桶排序(Bucket Sort) 桶排序 的核心思想是将要排序的数据分到若干个有序的“桶”中，每个桶里的数据再做单独排序。桶排完序之后，再把每个桶的数据按照顺序依次取出，组成的序列就是有序的了。
桶排序的时间复杂度为什么为：O(n)。
数据：n 条 桶：m 个 每个桶数据：n/m 条 每个桶快排时间复杂度：O(k*logk) m 个桶时间复杂度:O(m*k*logk) = O(m*(n/m)logk) = O(nlogk) = O(nlogn/m) m ~= n 的时候，O(nlogn/m) ~= O(n)  也就是当桶个数与数据非常接近，log(n/m)是一个非常小的常量，这个时候的排序时间复杂度为 O(n)。
桶排序对数据要求非常苛刻： …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/%E7%BA%BF%E6%80%A7%E6%8E%92%E5%BA%8F/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>更多</p>
            </a>
            
          </div>
      </article>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap;line-height:42px">05-12</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/svg/">SVG碎片整理</a></h1>
          <div class="content is-hidden-mobile">
              项目开发中遇到的 SVG 碎片知识收集。
 SVG 碎片整理 SVG  张鑫旭文摘
 SVG和CSS几乎可以看成是同一个年代出来的东西，但是在Web界面展示这块，CSS长期统领江山，SVG偃旗息鼓，直到这些年，SVG开始乘势而上。 然而需求是千变万化的，当我们使用SVG实现一些视觉表现精湛的效果的时候，免不了会有增加一段描述文字的需求。呵呵，这个时候SVG怕是要傻眼了，SVG的元素应付多行文字实在不擅长，如果SVG中的文字可以如同CSS中的表现一样就好了？
 &lt;foreignObject&gt; 元素的作用是可以在其中使用具有其它XML命名空间的XML元素，换句话说借助&lt;foreignObject&gt;标签，我们可以直接在SVG内部嵌入XHTML元素.
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt; …
            
          </div>
      </article>
      
      
      <h1 class="title is-3">2017</h1>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap;line-height:42px">01-05</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/h5%E6%8E%A8%E5%B9%BF%E7%9B%B8%E5%85%B3/">H5推广相关</a></h1>
          <div class="content is-hidden-mobile">
            实际上H5可以推广的渠道有限，不像App的推广有各类应用商店的流量。
推广建议：
 （有价值的软文推广！）从用户角度挖掘H5的价值点，写一篇软文。通过图文群发来推广H5无疑是最重要的方式，但是如果只是简单硬性推广，比如宣布今天我们上线了一个高大上云云的H5，然后就让用户点击“阅读原文”自己看，显然这种新闻通稿式的推广不会有太好的效果。  一个好的H5一定具备打动用户的价值点，从一个角度切入写一篇软文，无论通过投稿的方式还是大号转发都能给你带来意想不到的传播效果。投入再大再精彩的H5，如果没有好的推广就只能孤芳自赏，所以哪怕是留点推广预算也是值得的。
 尽你所能利用所有能推广H5的渠道。目前比较常用的方式：通过公众号的图文群发推广、微信群推广、线下二维码推广，以及前面提到的KOL转发和投稿等。这里主要说一下有关微信群的几点建议。  首先，你需要列出所有你能用到的资源，并发动内部人员转发，当然 …
            
          </div>
      </article>
      
      
      <h1 class="title is-3">2016</h1>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap;line-height:42px">12-21</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/animate/">动画9条原则</a></h1>
          <div class="content is-hidden-mobile">
            7种动效，9条原则。
视觉反馈 对于任何用户界面来讲，视觉反馈都是至关重要的。在现实生活中，人们和任何物体的交互都是伴随着回应的。
同样地，人们期待从APP元素中得到一个类似的效果。App给的视觉，听觉及触觉反馈，使用户感到他们在操控APP。同时视觉反馈有个更简单的用途：它暗示着您的APP运行正常。当一个按钮在放大或者一个被滑动图像在朝着正确方向移动，那么很明显，这个APP在运行着呢，在回应着用户的操作。下面的例子显示，当用户点击屏幕以示完成任务时，包含有数据的方块就缩小并且变成了绿色。
Tinder中使用的左划喜欢右划跳过被大家所熟知，而这种交互方式同样也是一种视觉反馈。这个动画效果已经被我们实现出来放在开源库Koloda中了。
功能改变 这种动效展示出元素在与用户进行交互的时候，是如何发生变化的。当您想要阐明一个元素功能如何变化时，这种动效是最好的选择。它经常与按钮，图标和其它小设计元 …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/animate/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>更多</p>
            </a>
            
          </div>
      </article>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap;line-height:42px">12-05</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/http%E6%9D%83%E5%A8%81%E6%8C%87%E5%8D%97/">HTTP权威指南</a></h1>
          <div class="content is-hidden-mobile">
            《HTTP权威指南》读书笔记
第一章 HTTP概述 第一章介绍内容：
 Web客户端与服务器是如何通信的 资源来自何方 Web事务是怎样工作的 HTTP通信所使用的报文格式 底层TCP网络传输 不同的HTTP协议 因特网上安装的大量HTTP架构组件中的一部分。  1.1 HTTP－－因特网的多媒体信使 HTTP可以从遍布全世界的Web服务器上将这些信息块迅速，便捷，可靠地搬迁到人们桌面上的Web浏览器上。
1.2 Web客户端和服务器 Web内容都是存储在Web服务器上的。Web服务器所使用的是HTTP协议，因此经常会被称为HTTP服务器。这些HTTP服务器存储了因特网中的数据，如果HTTP客户端发出请求的话，他们会提供数据。
1.3 资源 Web服务器是Web资源的宿主。
资源不一定非得是静态文件，资源可以是根据需要生成内容的软件程序。
总之，所有类型的内容来源都是资源。
1.3.1 媒 …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/http%E6%9D%83%E5%A8%81%E6%8C%87%E5%8D%97/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>更多</p>
            </a>
            
          </div>
      </article>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap;line-height:42px">11-28</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/web%E4%B8%8A%E4%BC%A0/">Web上传</a></h1>
          <div class="content is-hidden-mobile">
            web上传的实现方式
表单提交上传 普通表单提交与上传表单提交区别 普通表单
&lt;form action=&quot;/&quot; &gt; &lt;input type=&quot;text&quot; name=&quot;name&quot;&gt;&lt;/input&gt; &lt;input type=&quot;text&quot; name=&quot;age&quot;&gt;&lt;/input&gt; &lt;button type=&quot;submit&quot;&gt;确定&lt;/button&gt; &lt;/form&gt;  上传表单
&lt;form action=&quot;/upload&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt; …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/web%E4%B8%8A%E4%BC%A0/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>更多</p>
            </a>
            
          </div>
      </article>
      
      
      
    </main>
  <section class="section">
  <div class="container">
    <nav class="level is-mobile">
      <div class="level-left">
        <div class="level-item">
          
          <a class="button is-rounded" disabled>
            <span class="icon is-small is-marginless">
              <i class="fa fa-angle-left"></i>
            </span>
            上一页
          </a>
          
        </div>
      </div>
      <div class="level-right is-marginless">
        <div class="level-item">
          
          <a class="button is-rounded" href="./page/2/">
            下一页
            <span class="icon is-small is-marginless">
              <i class="fa fa-angle-right"></i>
            </span>
          </a>
          
        </div>
      </div>
    </nav>
  </div>
</section>

  <section class="section">
  <div class="container has-text-centered">
    <p></p>
  </div>
</section>


</div>